<template>
    <div class="list w">
        <div class="header">
            <h1>{{list.title}}</h1>
            <a :href="list.link">
                <img src="../assets/icon/shangxin/jiantou.png" alt="">
                查看更多
            </a>
        </div>
        <div class="content">
            <div :class="{'item': true, 'w200': list.title == '拼团开奖'}" v-for="(item,index) in list.items">
                <img :src="item.src" alt="" :class="{'w100': item.isFirst}">
                <p class="tip" v-if="item.isDiscount">{{item.isDiscountName}}</p>
                <p class="title" v-if="!item.isFirst">{{item.title}}</p>
                <p class="price" v-if="!item.isFirst">
                    <span>￥<b>{{item.linePrice}}</b></span>
                    <span v-if="list.title != '拼团开奖'">{{item.number}}人已申请</span>
                    <span v-if="list.title == '拼团开奖'">距离开奖仅差{{item.number}}人</span>
                </p>
                <button class="btn" v-if="!item.isFirst">免费领取</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "List",
        props: {
            listApi: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                list: {}
            }
        },
        created() {
            this.list = this.listApi
        }
    }
</script>

<style scoped lang="less">
.list {
    margin: 0 auto;
    .header {
        display: flex;
        justify-content: space-between;
        h1 {
            font-size: 20px;
            font-weight: normal;
            color: #333;
            margin-bottom: 20px;
        }
        a {
            color: #999;
            line-height: 62px;
            &:hover {
                text-decoration: none;
                color: #151965;
                cursor: pointer;
            }
        }
    }
    .content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
            position: relative;
            width: 208px;
            height: 350px;
            padding: 2px;
            margin-bottom: 10px;
            background-color: #fff;
            overflow: hidden;

            img {
                display: block;
                width: auto;
                height: 212px;
            }

            .tip {
                position: absolute;
                top: 222px;
                height: 16px;
                padding-left: 5px;
                padding-right: 5px;
                line-height: 16px;
                background: #ffe7ee;
                color: #F01277;
                border-radius: 9px;
                vertical-align: top;
                font-size: 12px;
                border: 1px solid #ffbfd1;
            }

            .w100 {
                height: 100%;
            }

            .title {
                margin-top: 30px;
                margin-left: 3px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .price {
                display: flex;
                justify-content: space-between;
                vertical-align: bottom;
                span {
                    font-size: 16px;
                    b {
                        text-decoration: line-through;
                        font-weight: normal;
                    }
                    &:nth-child(2) {
                        color: #999;
                        font-size: 12px;
                    }
                }
            }
            .btn {
                width: 90%;
                height: 30px;
                line-height: 15px;
                border: 1px solid #151965;
                background-color: transparent;
                color: #151965;
                font-weight: bold;
                border-radius: 15px;
                margin-left: 10px;
                outline: none;
            }

            &:hover {
                cursor: pointer;
                border: 1px solid #151965;

                .btn {
                    background-color: #151965;
                    color: white;
                }
            }
        }
        .w200:nth-child(1) {
            width: 435px;
        }
    }
}
</style>
